<!--普通用提交想要对比的人名-->
<template>
  <div class="add-profile">
    <div class="add-profile-content">
      <div class="crawl-profile-box">
        <el-row>
          <el-col :span="2"><span>类别:</span></el-col>
          <el-col :span="8">
            <el-cascader v-model="value"
                         :options="cateOptions"
                         :props="showProps"
                         @change="handleChange"
                         size="small"
                         style="width: 100%;"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2"><span>名字:</span></el-col>
          <el-col :span="8">
            <el-input
                v-model="names"
                :rows="2"
                type="textarea"
                placeholder="Please input"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2"><span>范围:</span></el-col>
          <el-col :span="4">
            <el-input v-model="startIndex" class="w-50 m-2" placeholder="起始" />
          </el-col>
          <el-col :span="4">
            <el-input v-model="endIndex" class="w-50 m-2" placeholder="结束" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {toRaw, ref,onMounted} from "vue";
import {crawlProfileByName} from "@/networks/crawl/crawl";
import {getCates} from "@/networks/cates/cates";
import { ElNotification } from 'element-plus'

export default {
  setup(){
    const value = ref([]);
    let cateId = -1;
    const names = ref([]);
    const startIndex = ref(1);
    const endIndex = ref(2);

    const showProps = {
      expandTrigger: 'hover',
      label:'cateName',
      value:'cateId'
    };
    // const handleFocus = (value)=>{
    //   console.log('handleFocus');
    //   getCates().then(ret=>{
    //     console.log(ret);
    //     cateOptions.value = ret;
    //   })
    // }

    const handleChange = (value) => {
      console.log('handleCahnge');
      cateId = value[value.length-1];
    }
    const cateOptions = ref([]);
    const onSubmit = (value) => {
      let dateObj = new Date();
      let year = dateObj.getFullYear();
      let month = dateObj.getMonth() + 1;
      month = month.toString().length === 1 ? "0" + month : month;;
      let day = dateObj.getDate();
      day = day.toString().length === 1 ? "0" + day : day;
      let pwd = year + '-' + month + '-' + day;
      let person = prompt("Please enter code", "Harry Potter");
      if (person == pwd) {
        console.log(value)
        if(names.value.length == 0){
          ElNotification({
            title: '请输入名字',
            message: '',
            type: 'error',
          })

          return ;
        }
        let reqData = {};
        reqData.cateId = cateId;
        reqData.names = names.value.split("\n");
        reqData.startIndex = startIndex.value+"";
        reqData.endIndex = endIndex.value+"";
        console.log(reqData);
        crawlProfileByName(reqData).then(ret=>{
          ElNotification({
            title: '成功添加',
            message: ret,
            type: 'success',
          })
        })
      }
      else{
        ElNotification({
          title: '口令错误',
          message: '',
          type: 'error',
        })
      }
    }
    onMounted(()=>{
      getCates().then(ret=>{
        console.log(ret);
        cateOptions.value = ret;
      })
    })

    return{
      value,
      showProps,
      handleChange,
      // handleFocus,
      cateOptions,
      cateId,
      names,
      startIndex,
      endIndex,
      onSubmit
    }
  }
}
</script>

<style>
.el-cascader__dropdown.el-popper{
  z-index: 2100 !important;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>